<template>
  <div class="container">
    <div class="temper-tag">体温正常</div>
    <div class="stu-avatar"><img src="~images/common/student_avatar.png" /></div>
    <div class="stu-name">{{info.staff_name}}</div>
    <div class="stu-detail">{{info.staff_sex}} {{info.staff_age}} {{info.staff_sno}} (学号)</div>
    <!-- 主体 -->
    <ul class="stu-info-detail">
      <li class="info_item item_1">
        <span><img src="~images/common/abnormal.png" /></span>
        <span>异常</span>
        <span>20/11/13 23:40 测量体温 {{info.temperature}}°C</span>
      </li>
      <li class="info_item item_2">
        <span><img src="~images/common/gray_tel.png" /></span>
        <span>电话</span>
        <span>13800009999</span>
      </li>
      <li class="info_item item_3">
        <span><img src="~images/common/dormitory.png" /></span>
        <span>宿舍</span>
        <span>{{info.build_name}} {{info.dormitory_number}}</span>
      </li>
      <li class="info_item item_4">
        <span><img src="~images/common/stu_class.png" /></span>
        <span>班级</span>
        <span>{{info.class_year}} / {{info.college_name}} / {{info.class_name}}</span>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  props: {
    info: {
      type: Object,
      default:()=> {},
    },
  },
}
</script>
<style  lang="scss" scoped>
.container {
  position: relative;
  width: 345px;
  height: 180px;
  margin-bottom: 10px;
  background: #FFFFFF;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.09);
  border-radius: 5px;
  border-bottom: 6px solid #2A529F;
  overflow: hidden;
  .temper-tag {
    display: grid;
    place-items: center;
    position: absolute;
    top: 0;
    right: 14px;
    width: 80px;
    height: 30px;
    background: #DD563F;
    box-shadow: 0px 2px 4px 0px rgba(156, 28, 6, 0.2);
    border-radius: 0px 0px 5px 5px;
    font-size: 12px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
  }
  .stu-avatar {
    display: grid;
    place-items: center;
    position: absolute;
    top:16px;
    left: 20px;
    width: 36px;
    height: 36px;
    border: 1px dashed #8c97b2;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .stu-name {
    position: absolute;
    top: 18px;
    left: 68px;
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #002170;
  }
  .stu-detail {
    position: absolute;
    top: 40px;
    left: 69px;
    font-size: 12px;
    font-family: PingFangSC-Light, PingFang SC;
    font-weight: 300;
    color: #8C97B2;
  }
  .stu-info-detail {
    position: absolute;
    top: 76px;
    left: 20px;
    li {
      &:first-child{
      margin-top: 0;
      }
      &:last-child {
        margin-bottom: 0px;
      }
    }
    .info_item {
      display: flex;
      align-items: flex-end;
      margin: 4px 0;
      span{
        &:first-child {
          display: grid;
          place-items: center;
          width: 10px;
          height: 10px;
          border: 1px dashed #8c97b2;
          img {
            width: 100%;
            height: 100%;
          }
        }
        &:nth-child(2) {
          padding: 0 20px 0 8px;
          font-size: 12px;
          font-family: PingFangSC-Light, PingFang SC;
          font-weight: 300;
          color: #8C97B2;
        }
      }
    }
    .item_1 {
      span {
        &:last-child {
          font-size: 12px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #DD563F;
        }
      }
    }
    .item_2 {
      span {
        &:last-child {
          font-size: 12px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #48DBBB;
        }
      }
    }
    .item_3,
    .item_4 {
      span {
        &:last-child {
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #002170;
        }
      }
    }
  }
}
</style>